<template>
<el-header>/用户管理
</el-header>
  <el-main>
    <el-card>
        <el-row class="header" :gutter=20>
            <el-col :span=7>
           <el-input placeholder="请输入Id" clearable v-model="queryForm.userId">
            </el-input>
            
            </el-col>
             <el-button type="primary" :icon="Search" @click="loadData">查找</el-button>
            <el-button type="primary" @click="handleDialogValue()">添加用户</el-button>
        </el-row>
        <el-table :data="tableData" style="width: 100%">
            <el-table-column :prop="item.prop" :label="item.lable" v-for="(item,index) in options" :key="index" :sortable="item.sortable">
            <template #default="{row}" v-if="item.prop === 'action'">
                    <el-button size="small" @click="handleDialogValue(row)">编辑</el-button>
                    <el-button size="small" @click="handleDelete(row)">删除</el-button>
            </template>
            </el-table-column>
        </el-table>
    </el-card>
  </el-main>
  <Dialog 
    v-model="dialogVisible" 
    :dialogTitle="dialogTitle" 
    v-if="dialogVisible" 
    @initUserList="loadData()" 
    :dialogTableValue="dialogTableValue"
  />
</template>



<script setup>

import { ref } from 'vue'
import { $userSearch,$userDelete } from "../../api/userapi.js";
import {options} from './options'
import { Search} from '@element-plus/icons-vue'
import Dialog from './component/dialog.vue'
import { ElMessage ,ElMessageBox} from 'element-plus'

const form = ref({
  user_id: "",
  user_name: "",
  user_phone: "",
  user_email: "",
  user_sex: "",
  user_admin:""
});
const queryForm = ref({
 userId:""
});
const tableData =ref([]) //这句话有问题
const tableDataS =ref([]) 
const dialogVisible=ref(false)
const dialogTitle=ref('')
let dialogTableValue=ref({})

const loadData = async () => {
   
	tableData.value=tableDataS.value;
    console.log(queryForm.value,"manageuser");
    const test1={...queryForm.value};
    console.log(test1,"manageuser");
    if(test1.userId==""){
        const res = await $userSearch()
        console.log(res.data,"manageuser");
     
        tableData.value=res.data;
        tableDataS.value=res.data;
    }else{
        console.log(queryForm.value,"manageuser");
        tableData.value=tableData.value.filter(item=>item.userId==test1.userId)        
        }
}
loadData()
const handleDialogValue =(row)=>{
    //console.log(row)
    //console.log(JSON.stringify(row))
    //console.log(JSON.parse(JSON.stringify(row)))
    if(row==null){
        dialogTitle.value='添加用户'
        dialogVisible.value=true
        dialogTableValue={}
    }else{
        dialogTitle.value='编辑用户'
        dialogVisible.value=true
        dialogTableValue=JSON.parse(JSON.stringify(row))
        console.log(dialogTableValue)
    }
    
    //dialogTableValue={}
}


const handleDelete =(row)=>{
    //
    ElMessageBox.confirm(
    '你确定要删除这条数据吗？',
    '提示',
    {
      confirmButtonText: '确认',
      cancelButtonText: '取消',
      type: 'warning',
    }
  )
    .then(async() => {
      //  console.log(row.meetingroom_id,"row"){ user_id: row.user_id }
 
      let userDelete =  await $userDelete(row)
      console.log(userDelete)
      if(userDelete.data=='删除用户成功'){
        //
        ElMessage({
        type: 'success',
        message: '删除成功',
        })
      }else{
        ElMessage({
        type: 'error',
        message: '删除失败',
        })
      }
      
      loadData()
    })
    .catch(() => {
      ElMessage({
        type: 'info',
        message: '删除取消',
      })
    })
}

</script>

<style lang="scss" scoped>
.header{
    padding-bottom: 16px;
    box-sizing: border-box;
}
</style>